/**
 * 创建标签示例
 */

import * as THREE from 'three'
import { labelRenderer as labelRenderer2D, tag as tag2D } from '@/core/tag2D'
import {setModelPosition} from '@/components/three/utils';
import { ref } from 'vue'

export const useTag = (TE) => {
  const labelRenderer2DObj = ref(null)

  const handleClickTag = (e) => {
    console.log('点击了', e.target.innerHTML)
  }

  const createTag = (list = []) => {
    // const tagList = [
    //   {
    //     className: 'tag',
    //     name: '111可选(自定义属性)',
    //     text: '1栋',
    //     position: new THREE.Vector3(0,0,0),
    //   },
    //   {
    //     className: 'tag',
    //     name: '111xxx',
    //     text: '2栋',
    //     position: new THREE.Vector3(0,0,0),
    //   },
    //   {
    //     className: 'tag',
    //     name: '111xx',
    //     text: '3栋',
    //     position: new THREE.Vector3(0,0,0),
    //   },
    //   {
    //     className: 'tag',
    //     name: '111xxx',
    //     text: '4栋',
    //     position: new THREE.Vector3(0,0,0),
    //   },
    //   {
    //     className: 'tag',
    //     name: '111xxx',
    //     text: '5栋',
    //     position: new THREE.Vector3(0,0,0),
    //   },
    //   {
    //     className: 'tag',
    //     name: '111xx',
    //     text: '6栋',
    //     position: new THREE.Vector3(0,0,0),
    //   },
    //   {
    //     className: 'tag',
    //     name: '111xx',
    //     text: '7栋',
    //     position: new THREE.Vector3(0,0,0),
    //   },
    // ]
    const tagList=[]
    tagList.forEach(({ text, position, name, className }) => {
      const label2D = tag2D({text, name, className, handleClickTag})
      position.multiplyScalar(1)
      // label2D.position.copy(position)
      // label2D.position.copy(position)
      // label2D.position.set(50,0,50);
      console.log('label2D: ', label2D);
      // TE.scene.add(label2D)
      setModelPosition(label2D)
      TE.scene.add(label2D)

    })
    console.log('TE: ', TE);

    if (!labelRenderer2DObj.value) {
      labelRenderer2DObj.value = labelRenderer2D(TE.dom)
    }

    return labelRenderer2DObj
  }

  const renderTag = (scene, camera) => {
    return labelRenderer2DObj.value?.render(
      scene ?? TE.scene,
      camera ?? TE.camera,
    )
  }

  return {
    createTag,
    renderTag,
  }
}
